<template>
  <Header />
  <div class="title">
    <img class="bannerImg" src="@/assets/image/register.png" alt="" />
    <div class="bannerDiv"></div>
    <span>个人设置</span>
  </div>
  <div class="cantainer">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane :key="0" tab="资料修改"><SetInfo /></a-tab-pane>
      <a-tab-pane :key="1" tab="密码设置"><SetPassword /></a-tab-pane>
    </a-tabs>
  </div>
  <Footer />
</template>

<script>
import { defineComponent, ref } from "vue";
import Footer from "@/components/Footer.vue";
import Header from "@/components/Header.vue";
import SetInfo from "./components/SetInfo";
import SetPassword from "./components/SetPassword";
export default defineComponent({
  setup() {
    const activeKey = ref(0);

    return {
      activeKey,
    };
  },
  components: {
    Footer,
    SetInfo,
    SetPassword,
    Header,
  },
});
</script>

<style lang="less" scoped>
.title {
  position: relative;
  background-color: rosybrown;
  color: #fff;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: var(--bannerSize);

  .bannerImg {
    width: 100%;
    display: var(--bannerImgBool);
  }
  .bannerDiv {
    width: 100%;
    height: 230px;
    background-image: url(../../assets/image/register.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    display: var(--bannerDivBool);
  }
  span {
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.cantainer {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.24);
  border-radius: 20px;
  width: 100%;
  padding: 30px;
  max-width: 1248px;
  position: relative;
  top: var(--bannerTop);
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;

  .titleText {
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 20px;
    font-size: 1.37rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  /deep/ .ant-tabs-nav {
    width: 100%;
    padding: 0 4%;
    border: none;
    font-size: 1.3rem;
  }

  /deep/ .ant-tabs-tab {
    width: 50%;
    margin: 0;
    text-align: center;
  }
}
/deep/ .ant-modal-confirm-btns {
  display: none;
}
</style>
